
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>BI Apps Viewer</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="Stylesheet" type="text/css" href="../theme/css/style_appsview.css" />
 <link rel="Stylesheet" type="text/css" href="../theme/css/ui-layout.css" />

 <script type="text/JavaScript" src="../api/js/jquery-1.8.3.js"></script>
 <script type="text/javascript" src="../api/js/jquery-ui-1.10.3.custom.min.js"></script>
 <script type="text/JavaScript" src="../theme/script/jquery.layout.min.js"></script>
 <script type="text/JavaScript" src="../theme/script/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="../api/boi.js"></script>
 <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>
 <script type="text/javascript">
 //render the layout
 $(function(){
 BOI.Events.addListener(BOI.Events.repopen, function (args) {
 showHideComponents(args[0]);
 });
 BOI.Events.addListener(BOI.Events.repchange, function (args) {
 showHideComponents(args[0]);
 });
 function showHideComponents(rep_id) {
 var report = BOI.context.reports[rep_id];

 if (report) {
 for (var p in BOI.Designer.Layout.panels) {
 var panel = BOI.Designer.Layout.panels[p];
 for (var c in panel.components) {
 var comp = panel.components[c];
 if (comp.iframe) {
 if (comp.iframe.properties.varname) {
 var vname = comp.iframe.properties.varname;
 if (report.variables[vname]) {
 $(comp.element).show();
 }
 else {
 $(comp.element).hide();
 }
 }

 }
 }
 }
 }
 }

 BOI.Designer.initialize('bi_layout', 'TEST_BI_APP', function () {

 	/* TOP Panel */
  BOI.Designer.setPanel(
    'TOP',
    '100%',
    '80px',
    '',
    '',
    ''
  );

  BOI.Designer.addComponent(
    'Bi_apps_comp_banner_image',
    'Bi_apps_comp_banner_image.html',
    'TOP',
    {
      height: { name: 'height', value: '80px' },
      source: { name: 'source', value: '../theme/images/bg-header.png' },
      title: { name: 'title', value: 'Demo BI App' },
      username: { name: 'username', value: 'User Name' },
      width: { name: 'width', value: '100%' }
    }
  );

  /* LEFT Panel */
  BOI.Designer.setPanel(
    'LEFT',
    '300px',
    '100%',
    '',
    '',
    ''
  );

  BOI.Designer.addComponent(
    'Bi_apps_comp_tree_catalog01',
    'BI_APPS_COMP_REPORTS_CATALOG.HTM',
    'LEFT',
    {
      height: { name: 'height', value: '60%' }
    }
  );

  BOI.Designer.addComponent(
    'Bi_apps_comp_tree_org01',
    'BI_APPS_COMP_ORGANIZATION.HTM',
    'LEFT',
    {
      height: { name: 'height', value: '20%' },
      varname: { name: 'varname', value: '' },
      width: { name: 'width', value: '100%' }
    }
  );

  BOI.Designer.addComponent(
    'bi_apps_comp_textbox',
    'BI_APPS_COMP_TEXTBOX.HTML',
    'LEFT',
    {
      height: { name: 'height', value: '20%' },
      notify: { name: 'notify', value: 'true' },
      varname: { name: 'varname', value: 'PERIOD' },
      width: { name: 'width', value: '100%' }
    }
  );

  /* RIGHT Panel */
  BOI.Designer.setPanel(
    'RIGHT',
    '0px',
    '0%',
    '',
    '',
    ''
  );

  /* BOTTOM Panel */
  BOI.Designer.setPanel(
    'BOTTOM',
    '0%',
    '0px',
    '',
    '',
    'X'
  );

  /* CENTER Panel */
  BOI.Designer.setPanel(
    'CENTER',
    '100%',
    '100%',
    '',
    '',
    ''
  );

  BOI.Designer.addComponent(
    'bi_apps_comp_report_view',
    'BI_APPS_COMP_REPORT_VIEW.HTML',
    'CENTER',
    {
    }
  );



 var sizes = {
 top: parseInt(BOI.Designer.Layout.panels['TOP'].properties.height.value),
 left: parseInt(BOI.Designer.Layout.panels['LEFT'].properties.width.value),
 right: parseInt(BOI.Designer.Layout.panels['RIGHT'].properties.width.value),
 bottom: parseInt(BOI.Designer.Layout.panels['BOTTOM'].properties.height.value)
 }

 $('.bi_wrapper').layout({
 applyDefaultStyles: true,
 resizable: true,
 north__size: sizes.top,
 west__size: sizes.left,
 east__size: sizes.right,
 south__size: sizes.bottom,
 north__maskContents:    true,
 west__maskContents:   true,
 east__maskContents:   true,
 south__maskContents:    true,
 center__maskContents:   true
 });
 $('.bi_wrapper').css({'opacity':'1'},1000);

 }, false);
 });
 </script>
 <style>
 .bi_wrapper{height:calc(100% - 35px);}
 </style>
 </head>
 <body id="bi_layout">
 <div class="apps_viewer">
 <div class="bi_wrapper">
 <div class="ui-layout-center">
 <div id="CENTER">

 </div>
 </div>
 <div class="ui-layout-north">
 <div id="TOP">

 </div>
 </div>
 <div class="ui-layout-south">
 <div id="BOTTOM"></div>
 </div>
 <div class="ui-layout-east">
 <div id="RIGHT"></div>
 </div>
 <div class="ui-layout-west">
 <div id="LEFT">

 </div>
 </div>
 </div>
 <div class="footer">
 <div class="credits-cover">
 <div class="credits"></div>
 </div>
 <div class="copyright">
 <p>Copyright &copy; <span class="year"></span>&nbsp;<a>Saudi Aramco</a>. All Rights Reserved.</p>
 </div>
 <div class="bottom-links">
 <ul>
 <li><a href="#">Help</a></li>
 <li><a href="#">Sharek</a></li>
 <li><a href="#">Business Intelligence</a></li>
 </ul>
 </div>
 <div class="clear"></div>
 </div>
 </div>
 </body>
 </html>